<template>
    <div>
        <div class="searchInput">
            <div class="tabDiv">
                <div :class="{active : itemIndex == 1}" @click="btnClick(1)">全部</div>
                <div :class="{active : itemIndex == 2}" @click="btnClick(2)">待处理</div>
                <div :class="{active : itemIndex == 3}" @click="btnClick(3)">退款中</div>
                <div :class="{active : itemIndex == 4}" @click="btnClick(4)">已退款</div>
            </div>
            <div class="xia">
                <div class="kuang">
                    <div>
                        订单编号： <el-input placeholder="请输入订单编号"></el-input>&emsp;&emsp13;
                    </div>
                    <div>
                        手机号： <el-input placeholder="请输入手机号"></el-input>&emsp;&emsp13;
                    </div>
                    <div>
                    类型： <el-select style="width: 108px;" v-model="searchType" placeholder="请选择">
                                <el-option
                                v-for="item in typeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div>
                    状态： <el-select style="width: 108px;" v-model="searchState" placeholder="请选择">
                                <el-option
                                v-for="item in stateOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                <div>
                    <span class="demonstration">&emsp;&emsp;时间： </span>
                    <el-date-picker
                    v-model="searchDate"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </div>
            <div class="btns">
                <el-button class="chaxun">查询</el-button>
                <el-button class="reset">重置</el-button>
            </div>
        </div><br>
    </div>
        <!-- 数据 -->
        <el-table
            :header-cell-style="{background:'#e8efff',color:'#000000'}"
            :data="lockTableData"
            :loading="loading"
            style="width: 100%">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column prop="order" label="序号" width="60">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.order }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="order_number" label="订单编号">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.order_number }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="phone_number" label="手机号">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.phone_number }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="order_money" label="订单金额">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.order_money }}元
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="drawBack" label="退款金额">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                      {{ scope.row.drawBack }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="order_total" label="类型">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        <span v-if="scope.row.order_type == 0">占位订单</span>
                        <span v-if="scope.row.order_type == 1">充电订单</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="charge_state" label="状态">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        <span v-if="scope.row.pay_state == 0">退款中</span>
                        <span v-if="scope.row.pay_state == 1">已退款</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="created_time" label="创建时间">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.created_time }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
                <template v-slot="scope">
                    <div class="scope" style="color:#949BBE;">
                        <span class="editBtn">
                            <span class="shenhe" v-if="scope.row.pay_state==1" @click="examine(scope.row.id)">审核</span>
                            <span class="close" v-if="scope.row.pay_state==0" @click="closeRefund(scope.row.id)">关闭退款</span>
                            <span v-else></span>
                        </span>
                        <span class="detailBtn" @click="goDetail(scope.row.id,scope.row.order_type)">详情</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <Pagination />
        <!-- 同意退款 -->
        <el-dialog center :close-on-click-modal="false" width="636px" top="20vh" :visible.sync="newVisible">
            <template slot="title">
                <div class="dialog_title">
                    {{ dialogTitle }}
                </div>
            </template>
            <el-form label-position="right" :rules="rules" ref="ruleFormLock" label-width="120px" :model="drawInfoForm">
                <el-form-item prop="real_pay" label="实付金额:" >
                    <el-input v-model="drawInfoForm.real_pay" autocomplete="off" placeholder="请输入金额"></el-input>
                </el-form-item>
                <el-form-item prop="cause" label="退款原因:">
                    <el-input
                        style="width:423px ;background: #F0F1F6; outline: none;"
                        type="textarea"
                        :rows="5"
                        placeholder="多扣除金额"
                        v-model="drawInfoForm.cause">
                    </el-input>
                </el-form-item>
                <el-form-item prop="money" label="退款金额:">
                    <el-input v-model="drawInfoForm.money" autocomplete="off" placeholder="20.00元"></el-input>
                </el-form-item>
                <el-form-item>
                    <span class="beiZhu">备注：退款得金额会按原路返回，中途若产生手续费需退款人承担，谢谢！</span>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button class="formCancel" @click="rejectDrawback()">拒绝退款</el-button>
                <el-button class="formConfirm" type="primary"  @click="agreeDrawBack('ruleFormLock')">同意退款</el-button>
            </div>
        </el-dialog>
          <!-- 关闭退款 -->
          <el-dialog center :close-on-click-modal="false" width="636px" top="20vh" :visible.sync="closeVisible">
            <template slot="title">
                <div class="dialog_title">
                    退款申请
                </div>
            </template>
            <el-form label-position="right" :rules="rules" ref="ruleFormLock" label-width="120px" :model="closeInfoForm">
                <el-form-item prop="real_pay" label="实付金额:" >
                    <el-input v-model="closeInfoForm.real_pay" autocomplete="off" placeholder="请输入金额"></el-input>
                </el-form-item>
                <el-form-item prop="cause" label="退款原因:">
                    <el-input
                        style="width:423px ;background: #F0F1F6; outline: none;"
                        type="textarea"
                        :rows="5"
                        placeholder="多扣除金额"
                        v-model="closeInfoForm.cause">
                    </el-input>
                </el-form-item>
                <el-form-item prop="money" label="退款金额:">
                    <el-input v-model="closeInfoForm.money" autocomplete="off" placeholder="20.00元"></el-input>
                </el-form-item>
                <el-form-item>
                    <span class="beiZhu">备注：退款得金额会按原路返回，中途若产生手续费需退款人承担，谢谢！</span>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button class="formCancel" @click="closeVisible = false">取消</el-button>
                <el-button class="formConfirm" type="primary"  @click="closeDrawBack('ruleFormLock')">关闭退款</el-button>
            </div>
        </el-dialog>
        <SuccessTip :isAgreeShow="isAgreeShow" :text="Success_text"/>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination.vue'
import SuccessTip from '@/components/SuccessTip.vue'

    export default {
        components:{
            Pagination,SuccessTip
        },
        data() {
            return {
                itemIndex:1, //tab
                loading:true,
                disabled:false,
                isAgreeShow:false,
                Success_text:'操作成功',
                searchDate:'',
                searchState:'',
                searchType:'',
                searchStation:'',
                stationOptions: [
                    {
                        value: null,
                        label: '请选择'
                    }, 
                    {
                        value: 1,
                            label: '丰台科技充电站'
                            }, 
                            {
                            value: 0,
                            label: '总部基地充电站'
                            }, 
                        ],
                stateOptions: [
                    {
                        value: null,
                        label: '请选择'
                    }, 
                    {
                        value: 0,
                        label: '已退款'
                    }, 
                    {
                        value: 1,
                        label: '退款中'
                    }, 
                    {
                        value: 1,
                        label: '待处理'
                    }, 
                    {
                        value: 1,
                        label: '退款失败'
                    }, 
                    ],
                typeOptions: [
                    {
                    value: null,
                    label: '请选择'
                    }, 
                    {
                    value: 0,
                    label: '占位订单'
                    }, 
                    {
                    value: 1,
                    label: '充电订单'
                    }, 
                ],
                lockTableData: [
                    {
                        order: '1',
                        order_number: '20230202123',
                        phone_number: '159****3765',
                        drawBack:45,
                        order_money:45,
                        order_type:0,
                        pay_state:1,
                        created_time:'2023.03.03',
                        id:1
                    },
                    {
                        order: '1',
                        order_number: '20230202123',
                        phone_number: '159****3765',
                        drawBack:45,
                        order_money:45,
                        order_type:1,
                        pay_state:0,
                        created_time:'2023.10.13',
                        id:3
                    },
                    {
                        order: '1',
                        order_number: '20230202123',
                        phone_number: '159****3765',
                        drawBack:45,
                        order_money:45,
                        order_type:1,
                        pay_state:0,
                        created_time:'2023.08.06',
                        id:2
                    },
                    {
                        order: '1',
                        order_number: '20230202123',
                        phone_number: '159****3765',
                        drawBack:45,
                        order_money:45,
                        order_type:1,
                        pay_state:3,
                        created_time:'2023.08.06',
                        id:2
                    }
                   ],
                dialogTitle:'退款申请',
                confirmBtnText:"确认",
                newDetailVisible:false, 
                newVisible:false,// 审核退款
                drawInfoForm:{}, //审核退款
                closeVisible:false, // 关闭退款
                closeInfoForm:{}, //关闭退款
                is_detail:false,
                rules:{
                    real_pay: [
                        { required: true, message: '请输入实付金额', trigger: 'blur' }
                    ],
                    cause: [
                        { required: true, message: '请输入退款原因', trigger: 'blur' }
                    ],
                    money: [
                        { required: true, message: '请输入退款金额', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            // tab切换
            btnClick(index){
                this.itemIndex =index
            },
            rejectDrawback(){
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 验证完成
                    newVisible = false
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },
            agreeDrawBack(formName){
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 验证完成
                    this.$confirm('您确定要同意订单退款吗？', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    title:'操作提示',
                    center: true
                    }).then(() => {
                        this.newVisible = false
                        this.isAgreeShow = true
                        this.Success_text = '操作成功'
                        setInterval(() => {
                            this.isAgreeShow = false
                        }, 1500);
                    }).catch(() => {
                        this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                    
                });
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },
            closeDrawBack(formName){
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 验证完成
                    this.$confirm('您确定要关闭当前的退款吗？', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    title:'操作提示',
                    center: true
                    }).then(() => {
                        this.closeVisible = false
                        this.isAgreeShow = true
                        this.Success_text = '关闭成功'
                        setInterval(() => {
                            this.isAgreeShow = false
                        }, 1500);
                    }).catch(() => {
                        this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                    
                });
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },
            examine(){
                this.newVisible = true
            },
            closeRefund(){
                this.closeVisible = true
            },
            goDetail(id,type){
                console.log('type',type)
                if(type==0){
                    this.$router.push('/withdrawPlaceholder')
                } else if(type == 1){
                    this.$router.push('/withdrawCharging')
                }
            },
        },
    }
</script>

<style lang="less" scoped>

.searchInput{
    text-align: left;
    font-size: 14px;
    height: 25.98px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666 !important;
}
.el-input{
    width: 280px;
    height: 35.98px;
    font-size: 11.97px;
    color: #666666;
    background: #F0F1F6;
}
.el-input__inner{
  background-color: #F0F1F6;  
//   background-color: pink !important;  
}
.el-select{
    width: 280px;
    height: 35.98px;
}
.kuang{
    float: left;
}

.el-button{
    background: transparent;
    border: none;
}
.chaxun{
    background: #165BFF;
    color: white;
}
.reset{
    background: #F0F1F6;
    color: #666666;
}
::v-deep .el-table th > .cell {
  text-align: center;
}

::v-deep .el-table .cell {
  text-align: center;
}
.editBtn{
    display: inline-block;
    margin-right: 8px;
    color: #000000;
    cursor: pointer;
}
.detailBtn{
    margin-right: 8px;
    display: inline-block;
    color: #165BFF;
    cursor: pointer;
}
.deleteBtn{
    display: inline-block;
    color: #FA698D;
    cursor: pointer;
}
.confirmButtonClass{
    background: #165bff;
}
#dialog .el-dialog__header {
    padding: 20px 20px 0px;
    background: #165BFF;
    text-align: left;
    font-weight: bold;
}
#dialog .el-dialog__body{
    height: 188px;
}
.formCancel,.formConfirm{
    width: 140px;
    height: 44px;
    border-radius: 4px 4px 4px 4px;
    border: none;
    opacity: 1;
}
.formCancel{
    background: white;
    border: 1px solid #F0F1F6;
}
.formConfirm{
    margin-left: 24px;
    background: #165BFF;
}
.dialog-footer{
    margin-top: -50px;
    text-align: center;
}
.el-dialog .el-input{
    width: 423px;
}
.el-dialog .el-select{
    width: 423px;
}
.dialog_title{
    margin-top: 24px;
    font-size: 16px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
}
.kuang>div{
    margin: 5px auto;
    display: inline-block;
}
.a .el-select{
    width: 108px;
}
.el-table{
    margin-top: 115px;
}
.xia{
    height: 50px;
}
.btns{
    float: right;
}
.btm{
    margin-top: 14px;
    margin-bottom: 32px;
}
.beiZhu{
    transform: translate(-50px,0);
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999; 
}
.close{
    color: #7D6CFF;
}
.shenhe{
    color: #00E781;
}
.tabDiv{
    display: flex;
    border-radius: 4px;
    margin-bottom: 24px;
}
.tabDiv>div{
    text-align: center;
    line-height: 36px;
    box-sizing: border-box;
    width: 76.5px;
    height: 36px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    border: 1px solid #F0F1F6;
    cursor: pointer;
}
.tabDiv>div:first-child{
    border-radius: 4px 0 0 4px;
}
.tabDiv>div:last-child{
    border-radius: 0 4px 4px 0;
}
.active{
    color: #165BFF !important;
    border: 1px solid #165BFF !important;
}
.el-date-picker{
    background: transparent;
}
</style>
<style>
.el-message-box__header{
    font-size: 16px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    line-height: 16px;
}
.el-message-box{
    width: 360px !important;
    height: 188px !important;
    background:#FFFFFF;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
}
.el-message-box--center .el-message-box__content{
    margin-top: 10px;
}
.el-message-box__message{
    font-size: 16px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}
.el-message-box__btns{
    margin-top:38px ;
}
.el-button--default{
    width: 80px;
    height: 36px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
}
.el-button--primary{
    width: 80px;
    height: 36px;
    background:#165BFF !important;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #165BFF;
    opacity: 1;
}
.el-range-input{
    background: #f0f1f6;
    font-size: 12px !important;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}
    .el-form-item__label {
        color: #666666;
        font-size: 14px;
    }
</style>